<template>
	<div class="topic">
		<div class="topic_content">
			<img src="http://static.udz.com/uploads/2016/11/21/2631977891835697.jpeg" v-bind:class="{zoom: zoomFlag}" v-on:mouseover="zoomFlag=true" v-on:mouseout="zoomFlag=false" />
			<h6>《生活大爆炸》里的主角离你有多远？</h6>
		</div>
		<div class="f-l">
			<goods></goods>
		</div>
		<div class="f-l">
			<goods></goods>
		</div>
	</div>
</template>

<script>
	import goods from "./goods.vue"
	export default {
		components: {
			goods,
		},
		data() {
			return {
				zoomFlag: false,

			}
		}
	}
</script>

<style scoped lang="less" rel="stylesheet/less">
	.topic {

		width: 1200px;
		height: 252px;
		margin: 20px auto 0 auto;
		box-shadow:0 0 10px rgba(0, 0, 0, .5);
		/*font-size: 0;*/
		font-family: "微软雅黑";
		/*vertical-align: baseline;*/
		.topic_content {
			/*display: inline-block;*/
			float: left;
			position: relative;
			width: 671px;
			height: 252px;
			overflow: hidden;
			img {
				width: 100%;
				height: 100%;
				cursor: pointer;
				transition: all 0.6s;
				&.zoom {
					transform: scale(1.05);
				}
			}
			h6 {
				/*display: block;*/
				box-sizing: border-box;
				width: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				height: 28px;
				font-size: 0.75rem;
				position: absolute;
				line-height: 28px;
				color: white;
				bottom: 0;
				font-weight: normal;
				padding: 0 10px;
			}
		}
	}
	
	.f-l {
		/*display: inline-block;*/
		float: left;
	}
</style>